<template>
  <div style="margin-bottom: 50px;">
    <van-nav-bar title="收货地址" left-text="返回" left-arrow @click-left="$router.go(-1)" />
    <div v-if="list.length == 0">
      <van-empty description="暂无收货地址" />
    </div>
    <div v-for="(item, index) in list" :key="index" v-else class="aa">

      <div style="width: 100%;height: 70px;  ">
        <div>
             <!-- @vue-ignore -->
          {{ item.addresname }}  
             <!-- @vue-ignore -->
          {{ item.addresphone }}
        </div>
        
        <div>
             <!-- @vue-ignore -->
          {{ item.addrescity }}
             <!-- @vue-ignore -->
          {{ item.addresdesc }}
        </div>

      </div>
      <div style="width: 100%;height: 30px;position: relative;">
        <div style="position: absolute;right: 10px;">
          <van-icon name="edit" @click="onEdit(item)" style="font-size: 18px;" />
        </div>
        <div style="position: absolute;right: 35px;">
             <!-- @vue-ignore -->
          <van-icon name="delete" style="font-size: 18px;" @click="del(item.id)" />
        </div>
        <span>
             <!-- @vue-ignore -->
          <van-checkbox :checked="item.addresstate == '1'" style="font-size: 12px;  margin-left: 15px;"
            @click="mo(item.id)">设为默认地址</van-checkbox>
        </span>
      </div>
    </div>

    <div>
      <van-button type="primary" style="width: 100%;border-radius: 1.25rem;position: fixed;bottom: 0;"
        @click="shou">添加收货地址</van-button>
    </div>
  </div>

</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { showToast } from 'vant';
import { useRouter } from 'vue-router';
import axios from 'axios'
import { ElMessage } from 'element-plus';

const router = useRouter();


const list = ref<DataList[]>([])
interface DataList {
  addresname: string,
  addresphone: string,
  addrescity: string,
  addresdesc: string,
  addresstate: string,
  id: string

}
const mo = (item: string) => {
  axios.post('/api/address/default', { id: item }).then((res) => {
    ElMessage.success(res.data.msg)
    getList()
  })
}
const onEdit = (item: any) => {
  router.push({ path: '/edit2', query: item })

}
onMounted(() => {
  getList()
})

const getList = async () => {
  axios.get('/api/address/list').then(res => {
    console.log(res);
    list.value = res.data.data
    console.log(list.value);

  })
}

const shou = () => {
  router.push('/edit')
}
const del = async (id: string) => {
  axios.delete('/api/address/delete', {
    params: {
      id
    }
  }).then(res => {
    console.log(res);
    if (res.data.code === 200) {
      showToast('删除成功')
    }

  })
  getList()
}

</script>


<style scoped lang="scss">
.aa {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-self: center;
  width: 100%;
  height: 70px;
  border-bottom: 1px solid #ccc;
  background: #eeeeee;
  line-height: 20px;
  border-radius: 25px;
  text-align: center;
  margin-top: 5px;
}
</style>